import React from 'react'
import {
  Layout,
  Menu,
  Avatar,
  Breadcrumb,
  Icon,
  Button,
  message,
  Col,
  Row,
  ConfigProvider,
} from 'antd'
import { history, Link, Helmet } from 'umi'
import zhCN from 'antd/es/locale/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
const { Header, Content, Footer, Sider } = Layout
const { SubMenu } = Menu
const activeMenu = {
  workspace: '1',
  addarticle: '2',
  comment: '3',
  articlelist: '4',
}
const webTitle = {
  workspace: '工作台',
  addarticle: '添加文章',
  comment: '评论管理',
  articlelist: '文章列表',
}
class SiderDemo extends React.Component {
  state = {
    collapsed: false,
    activeKey: '',
    path: '',
  }

  onCollapse = (collapsed) => {
    this.setState({ collapsed })
  }

  logout = () => {
    sessionStorage.removeItem('token')
    message.success('退出成功')
    history.replace('/login')
  }
  componentDidMount() {
    const path = history.location.pathname.split('/').pop()?.toLowerCase()
    this.setState({ activeKey: activeMenu[path], path })
  }
  componentDidUpdate() {
    const path = history.location.pathname.split('/').pop()?.toLowerCase()
    if (path != this.state.path) {
      this.setState({ path })
    }
  }
  render() {
    return (
      <ConfigProvider locale={zhCN}>
        <Layout style={{ minHeight: '100vh' }}>
          <Helmet>
            <title>{webTitle[this.state.path]}</title>
          </Helmet>
          <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
            <div
              style={{
                height: 40,
                margin: 16,
              }}
            >
              <span style={{ color: 'skyblue', fontSize: 23, fontWeight: 450 }}>
                <Avatar
                  size={40}
                  src="https://img1.baidu.com/it/u=484235812,2378452320&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                />
                <b style={{ verticalAlign: 'bottom', margin: '0 5px' }}>
                  {this.state.collapsed ? '' : 'CoderZrf'}
                </b>
              </span>
            </div>
            <Menu
              theme="dark"
              selectedKeys={[this.state.activeKey]}
              defaultOpenKeys={['sub1']}
              onClick={(item) => {
                this.setState({ activeKey: item.key })
              }}
              mode="inline"
            >
              <Menu.Item key="1">
                <Link to="/admin/workspace">
                  <Icon type="pie-chart" />
                  <span>工作台</span>
                </Link>
              </Menu.Item>
              <Menu.Item key="2">
                <Link to="/admin/addarticle">
                  <Icon type="desktop" />
                  <span>添加文章</span>
                </Link>
              </Menu.Item>
              <SubMenu
                key="sub1"
                title={
                  <span>
                    <Icon type="user" />
                    <span>文章管理</span>
                  </span>
                }
              >
                <Menu.Item key="3">
                  <Link to="/admin/comment">
                    <Icon type="file" />
                    <span>评论管理</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="4">
                  <Link to="/admin/articlelist">
                    <Icon type="unordered-list" />
                    <span>文章列表</span>
                  </Link>
                </Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout>
            <Content style={{ margin: '0 16px' }}>
              <Row align="middle" type="flex">
                <Col span={22}>
                  <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>后台管理系统</Breadcrumb.Item>
                    <Breadcrumb.Item>{webTitle[this.state.path]}</Breadcrumb.Item>
                  </Breadcrumb>
                </Col>
                <Col span={2}>
                  <Button onClick={this.logout} type="primary">
                    退出登录
                  </Button>
                </Col>
              </Row>

              <div style={{ padding: 24, background: '#fff', minHeight: 450 }}>
                {this.props.children}
              </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>Blog System Created by CoderZrf</Footer>
          </Layout>
        </Layout>
      </ConfigProvider>
    )
  }
}
SiderDemo.wrappers = ['@/wrappers/auth']
export default SiderDemo
